<template>
  <!-- 设备管理 -- 新增设备 -->
  <view class="addingDevice">
    <view class="wrapper">
      <view class="wrapper-item content">
        <u-form
          :model="form"
          ref="form"
          label-width="100"
          :error-type="errorType"
        >
          <view class="inputPad">
            <u-form-item
              label="选择餐厅"
              borderBottom
              :required="true"
              @click="cellClick('name', 'restaurantIdDesc')"
            >
              <u--input
                v-model="form.restaurantIdDesc"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择"
                placeholderClass="placeholderClass"
                inputAlign="right"
                border="none"
              ></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </view>

          <u-form-item label="设备组名称" borderBottom :required="true">
            <u--input
              v-model.trim="form.name"
              border="none"
              placeholder="请填写"
              placeholderClass="placeholderClass"
              inputAlign="right"
              :maxlength="30"
            ></u--input>
          </u-form-item>

          <view class="inputPad">
            <u-form-item
              label="设备经纬度"
              borderBottom
              :required="true"
              @click="mapHandle"
            >
              <u--input
                v-model="lnglat"
                disabled
                disabledColor="#ffffff"
                placeholder="在地图上选择点位"
                placeholderClass="placeholderClass"
                inputAlign="right"
                border="none"
              ></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </view>

          <view class="inputPad">
            <u-form-item
              label="监控仪厂家"
              borderBottom
              :required="true"
              @click="cellClick('factoryName', 'monitorBrandDesc')"
            >
              <u--input
                v-model="form.monitorBrandDesc"
                disabledColor="#ffffff"
                placeholder="请选择"
                placeholderClass="placeholderClass"
                inputAlign="right"
                border="none"
                readonly
              ></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </view>

          <u-form-item label="监控仪MN号" borderBottom :required="true">
            <u--input
              v-model.trim="form.monitorMn"
              border="none"
              placeholder="请填写"
              placeholderClass="placeholderClass"
              inputAlign="right"
              :maxlength="18"
              @focus="monitorMnFocus"
              @blur="monitorMnBlur"
            ></u--input>
          </u-form-item>
        </u-form>

        <view class="add-lists">
          <view
            class="add-item"
            v-for="item in adddeviceList"
            :key="item.id"
            :data-url="`${item.url}`"
            @click="handleClickRouter"
            :class="item.activeFlag ? 'active-item' : ''"
          >
            <image
              :src="
                baseImgUrl +
                (item.activeFlag ? 'righticon.png' : 'plusIcon.png')
              "
              mode="aspectFill"
            ></image>
            <view>{{ item.activeFlag ? item.actName : item.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns thispageBtn">
      <button
        class="cancel-btn lt"
        type="primary"
        @click="navBack('back', 1, 1)"
      >
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        保存
      </button>
    </view>

    <u-picker
      :show="pickerShow"
      :columns="columns"
      :keyName="keyName"
      @confirm="showConfirm"
      @close="pickerClose"
      @cancel="pickerCancel"
      :closeOnClickOverlay="true"
    ></u-picker>
  </view>
</template>

<script>
import {
  deviceInsert,
  factoryList,
  devicemnFindmnuse,
} from "@/api/deviceManage.js";
import { restaurantList } from "@/api/myself.js";
import {
  Toast,
  navBack,
  handleClickRouter,
  isNumber,
  emitTime,
} from "@/utils/util.js";
import mixin from "@/utils/mixin.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      form: {},
      errorType: ["none"],
      lnglat: "", //经纬度
      adddeviceList: [
        {
          id: 1,
          name: "添加净化器",
          actName: "净化设备",
          activeFlag: false,
          url: "/deviceManagement/addCleansing/addCleansing",
        },
        {
          id: 2,
          name: "添加排风机",
          actName: "风机信息",
          activeFlag: false,
          url: "/deviceManagement/addCleansing/addwmInfo",
        },
        {
          id: 3,
          name: "添加烟道",
          actName: "烟道信息",
          activeFlag: false,
          url: "/deviceManagement/addCleansing/flueInfo",
        },
      ],
    };
  },
  onLoad(option) {
    if (option.flag) {
      uni.removeStorageSync("purifySave");
      uni.removeStorageSync("addwmInfo");
      uni.removeStorageSync("flueInfo");
    }
  },
  onShow() {
    if (uni.getStorageSync("purifySave")) {
      this.adddeviceList[0].activeFlag = true;
    }

    if (uni.getStorageSync("addwmInfo")) {
      this.adddeviceList[1].activeFlag = true;
    }

    if (uni.getStorageSync("flueInfo")) {
      this.adddeviceList[2].activeFlag = true;
    }
  },
  methods: {
    handleClickRouter,
    navBack,
    /* cell 点击 */
    cellClick(name, type) {
      this.keyName = name;
      this.cellType = type;
      let code = "";
      switch (this.cellType) {
        case "restaurantIdDesc":
          code = "restaurantIdDesc";
          break;
        case "monitorBrandDesc":
          code = "monitorBrandDesc";
          break;

        default:
          break;
      }

      if (code == "restaurantIdDesc") {
        restaurantList().then((res) => {
          this.columns[0] = res.result || [];
          this.pickerShow = true;
        });
      }

      if (code == "monitorBrandDesc") {
        factoryList().then((res) => {
          this.columns[0] = res.result || [];
          this.pickerShow = true;
        });
      }
    },
    /* 选择器 确定 */
    showConfirm(e) {
      let arr = e.value;
      if (arr.length) {
        let obj = arr[0];
        switch (this.cellType) {
          case "restaurantIdDesc":
            this.form.restaurantId = obj.id;
            this.form.restaurantIdDesc = obj.name;
            break;
          case "monitorBrandDesc":
            this.form.factoryId = obj.id;
            this.form.monitorBrandDesc = obj.factoryName;
            break;
          default:
            break;
        }
      }
      this.pickerShow = false;
    },
    mapHandle() {
      let _this = this;
      uni.chooseLocation({
        success: function (res) {
          let { longitude, latitude } = res;
          _this.form.lng = longitude;
          _this.form.lat = latitude;
          _this.lnglat = `${longitude}-${latitude}`;
        },
        fail: function (err) {
          console.log(err, "错误的");
        },
      });
    },
    monitorMnFocus() {
      if (!this.form.monitorBrandDesc) {
        Toast("请先选择监控仪厂家");
        return;
      }
    },
    monitorMnBlur() {
      if (!this.form.monitorBrandDesc) {
        this.form.monitorMn = "";
        return;
      }

      devicemnFindmnuse({
        factoryId: this.form.factoryId,
        mn: this.form.monitorMn,
      }).then((res) => {
        if (res.code == 400) {
          Toast("请输入正确的MN号");
          this.form.monitorMn = "";
        }
      });
    },
    submitHandle() {
      let {
        restaurantIdDesc,
        name,
        monitorBrandDesc,
        monitorMn,
        restaurantId,
        factoryId,
        lat,
        lng,
      } = this.form;

      if (!restaurantIdDesc) {
        Toast("请选择餐厅");
        return;
      }

      if (!name) {
        Toast("请输入设备组名称");
        return;
      }

      if (!this.lnglat) {
        Toast("请选择设备经纬度");
        return;
      }

      if (!monitorBrandDesc) {
        Toast("请选择监控仪厂家");
        return;
      }

      if (!monitorMn) {
        Toast("请输入监控仪MN号");
        return;
      }

      let numberMn = /^[0-9A-Z]{13,18}$/;
      if (monitorMn && !numberMn.test(monitorMn)) {
        Toast("监控仪MN号请输入13~18位字符");
        return;
      }

      var devicePurify = uni.getStorageSync("purifySave") || null; // 净化器
      var deviceFan = uni.getStorageSync("addwmInfo") || null; // 排风机
      var deviceSmoke = uni.getStorageSync("flueInfo") || null; //烟道

      var device = {
        name,
        restaurantId,
        factoryId,
        monitorMn,
        lat,
        lng,
      };

      let data = {
        device,
        devicePurify,
        deviceFan,
        deviceSmoke,
      };

      deviceInsert(data).then((res) => {
        if (res.code == 200) {
          Toast("添加成功");
          emitTime("deviceManageData");
          navBack();
          return;
        }
        Toast(res.message);
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.addingDevice {
  flex: 1;
  background-color: #f3f3f3;
  .addingDevice-title {
    position: absolute;
    top: 10rpx;
    left: 6%;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: bold;
  }

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    // margin-bottom: 50px;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;
    }

    .content {
      margin: 0 auto;
      height: calc(100vh - 90px);
      overflow-y: auto;
    }

    .seleTime {
      width: 45rpx;
      height: 45rpx;
    }
  }

  .map-form {
    display: flex;
    .map-img {
      color: #00c9ae;
      font-size: 30rpx;
      font-weight: 500;
      image {
        display: inline-block;
        margin-right: 10rpx;
        vertical-align: top;
        width: 30rpx;
        height: 40rpx;
      }
    }
  }

  .add-lists {
    display: flex;
    justify-content: space-between;
    .add-item {
      padding-top: 45rpx;
      width: 195rpx;
      height: 195rpx;
      font-size: 26rpx;
      color: #666666;
      text-align: center;
      border: 1px solid #e3e8ec;
      background: #f3f5f7;

      image {
        margin-bottom: 10rpx;
        width: 44rpx;
        height: 44rpx;
      }
    }

    .active-item {
      background: #effffd;
      border: 1px solid #00c9ae;
    }
  }

  .thispageBtn {
    position: absolute;
    width: 100vw;
    bottom: 0;
  }
}
</style>
